<template>
	<!-- 导航栏 -->
	<el-breadcrumb separator="/" class="custom-breadcrumb">
		<el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>咨询师管理</el-breadcrumb-item>
		<el-breadcrumb-item>咨询师管理</el-breadcrumb-item>
	</el-breadcrumb>


	<!-- 搜索 -->
	<el-form :inline="true" :model="queryInfo" class="search-form">
		<el-form-item label="咨询师名称">
			<el-input v-model="queryInfo.counselorName" placeholder="请输入咨询师名称" clearable style="width: 150px;" />
		</el-form-item>

		<el-form-item label="咨询师等级">
			<el-select v-model="queryInfo.counselorLevelId" placeholder="请选择咨询师等级" clearable style="width: 200px;">
				<el-option label="国家一级" value="1" />
				<el-option label="国家二级" value="2" />
				<el-option label="国家三级" value="3" />
				<el-option label="国家四级" value="4" />
			</el-select>
		</el-form-item>



		<el-form-item label="地址">
			<el-input v-model="queryInfo.address" placeholder="请输入地址" />
		</el-form-item>
		<el-form-item label="手机号">
			<el-input v-model="queryInfo.phone" placeholder="请输入手机号" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="handleSearch">搜索</el-button>
			<el-button type="success" @click="handleCreate">新增咨询师</el-button>
			<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
		</el-form-item>
	</el-form>


	<!-- 表格 -->
	<el-table :data="dataList" row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
		<el-table-column prop="id" label="ID" width="85" />
		<el-table-column prop="counselorName" label="咨询师名称" width="120" />
		<el-table-column prop="counselorLevel.counselorLevelName" label="咨询师等级" />
		<el-table-column prop="counselorPhone" label="手机号" />
		<el-table-column prop="counselorEmail" label="邮箱" />

		<el-table-column prop="counselorImg" label="头像">
			<template #default="scope">
				<el-image style="width: 100px; height: 100px;text-align:center;"
					:src="'http://localhost:8080/sfzy'+scope.row.counselorImg" fit="contain"></el-image>
			</template>
		</el-table-column>
		<el-table-column prop="counselorCertificate" label="证书证明">
			<template #default="scope">
				<el-image style="width: 100px; height: 100px;text-align:center;"
					:src="'http://localhost:8080/sfzy'+scope.row.counselorCertificate" fit="contain"></el-image>
			</template>
		</el-table-column>

		<el-table-column prop="counselorAddress" label="所属地址" />
		<el-table-column prop="counselorProfile" label="咨询师简介" />

		<el-table-column prop="counselorAddress" label="职位">
			<template #default="scope">
				<el-tag type="primary" v-if="scope.row.counselorPosts == 1">咨询师</el-tag>
				<el-tag type="danger" v-else>心理导师</el-tag>
			</template>
		</el-table-column>

		<el-table-column label="操作" width="200">
			<template #default="scope">
				<el-button type="primary">编辑</el-button>
				<el-button type="danger">删除</el-button>
			</template>
		</el-table-column>

	</el-table>




	<!-- 分页区域 -->
	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
		:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
		layout="total, sizes, prev, pager, next, jumper" :total="total">
	</el-pagination>


<!-- 滚动条 -->
	<el-scrollbar max-height="auto">
		
		<p v-for="item in count" :key="item" class="scrollbar-demo-item">
			{{ item }}
		</p>
	</el-scrollbar>


</template>

<script setup>
	import {
		ElMessage
	} from 'element-plus';
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	// 搜索参数
	const queryInfo = reactive({
		counselorName: '',
		counselorLevelId: '',
		counselorAddress: '',
		counselorPhone: '',
		pageNum: 1,
		pageSize: 10
	});



	// 总数量
	const total = ref(0)
	// 数据列表
	const dataList = ref([])

	const axios = getCurrentInstance().appContext.config.globalProperties.axios;

	// 获取列表数据
	const queryDataList = () => {
		axios.get('courseClassify/all', {
			params: queryInfo,

		}).then((resp) => {
			if (resp.code == 200) {
        console.log('接口响应数据:', response.data);
				dataList.value = resp.data.list;
				total.value = resp.data.total;

			} else {
				ElMessage.error('查询失败')
			}
		})
	}
	onMounted(() => {
		queryDataList()
	})




	// 搜索方法
	const handleSearch = () => {
		// 这里添加实际调用后端接口进行搜索的逻辑，传入 queryInfo.value 作为参数
		console.log('搜索参数:', queryInfo.value);
	};
	// 新增咨询师方法
	const handleCreate = () => {
		// 这里添加新增咨询师的逻辑，比如打开新增表单弹窗等
		console.log('执行新增咨询师操作');
	};

	// 批量删除方法
	const handleBatchDelete = () => {
		// 这里添加获取选中行数据并调用后端接口进行批量删除的逻辑
		console.log('执行批量删除操作');
	};



	const handleSizeChange = (size) => {
		console.log('每页显示数量发生改变');
		queryInfo.pageSize = size
		queryDataList()
	}
	const handleCurrentChange = (num) => {
		console.log('页码发生改变');
		queryInfo.pageNum = num
		queryDataList()
	}
	// 多选
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		console.log(val);
		multipleSelection.value = val
	}
</script>

<style scoped>
	.custom-breadcrumb {
		padding: 12px 16px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
		/* 添加阴影效果 */
	}

	.search-form {
		margin-top: 15px;
	}
	
	
	
	
</style>